<template>
  <div>
    <h2>v-for初体验</h2>
    <ul>
      <!-- v-for 要循环生成谁，就写到谁身上 -->
      <li v-for="(item , index) in arr" :key="index">
        {{ item }}
        ---
        {{ index }}
      </li>
    </ul>
    <h2></h2>
    <ul>
      <!-- :key  暂时把它理解为可提高 v-for 渲染效率的属性，一般写成 item.id -->
      <li v-for="item in res.data" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <h2>可以遍历对象(了解)</h2>
    <ul>
      <li v-for="(val,key) in friend" :key="key">
        {{ key }}---{{ val }}
      </li>
    </ul>
    <h2>可以遍历固定的数字或字符串(了解)</h2>
    <ul>
      <li v-for="num in 8" :key="num">
        {{ num }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 准备数组
      arr: ["小奥迪", "大奥迪", "中奥迪", "奥迪哥"],
      // 再复杂一点的结构
      res: {
        code: 200,
        msg: "请求成功",
        data: [
          {
            id: 1,
            name: "小鑫鑫",
          },
          {
            id: 2,
            name: "大鑫鑫",
          },
          {
            id: 3,
            name: "中鑫鑫",
          },
        ],
      },
      // 遍历对象 (了解)
      friend: {
        name: '如花',
        age: 18,
        sex: '未知'
      }
    };
  },
};
</script>

<style>
</style>